<template>
	<view class="container">
		<u-navbar bgColor="#0e3a5e" title="个人中心" :autoBack="true" :placeholder="true" leftIconColor="#fff"
			:titleStyle="titleStyle">
		</u-navbar>
		<view class="pdBox">
			<view class="my_top">
				<view class="my_top_l">
					<u-avatar :src="info.avatar" default-url="../../static/avatar.png" size="60"></u-avatar>
					<text class="my_name">{{info.nickName}}</text>
				</view>
				<view class="my_top_l" @click="chooseAvatar">
					<text style="font-size: 26rpx; color: #ABABAB;">更换头像</text>
					<u-icon name="arrow-right" color="#DDDDDD"></u-icon>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<u-cell-group style="border: 1rpx solid #EEEEEE; border-radius: 10rpx 10rpx 10rpx 10rpx;">
				<u-cell v-if="adminList.length" icon="account" title="角色切换" iconStyle="font-size:20px" isLink @click="changeRoles"></u-cell>
				<u-cell icon="lock-open" title="修改密码" iconStyle="font-size:20px" isLink @click="openModal"></u-cell>
				<u-cell title="检查更新" :isLink="true" @click='checkUpdate'>
					<u-icon slot="right-icon" name="arrow-right"></u-icon>
				</u-cell>
				<u-cell title="版本" :value="version" :isLink="true" >
					<u-icon slot="right-icon" name="arrow-right"></u-icon>
				</u-cell>
			</u-cell-group>
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<u-cell-group style="border: 1rpx solid #EEEEEE; border-radius: 10rpx 10rpx 10rpx 10rpx;">
				<u-cell v-if="adminList.length" icon="account" title="角色切换" iconStyle="font-size:20px" isLink @click="changeRoles"></u-cell>
				<u-cell icon="lock-open" title="修改密码" iconStyle="font-size:20px" isLink @click="openModal"></u-cell>
			</u-cell-group>
			<!-- #endif -->
			<u-button type="primary" style="margin-top: 60rpx;" :throttleTime="1000" @click="loginOut">退出登录</u-button>

		</view>
		
		<u-modal :show="show" title="修改密码" @confirm="submitForm" showCancelButton @cancel="show = false">
			<view class="slot-content">
				<u--form labelPosition="left" :model="form" ref="uForm" :rules="rules" label-width="80">
					<u-form-item label="旧密码" prop="oldPassword" borderBottom ref="item1" required>
						<u--input type="password" v-model="form.oldPassword" placeholder="请输入旧密码"></u--input>
					</u-form-item>
					<u-form-item label="新密码" prop="newPassword" borderBottom ref="item1" required>
						<u--input type="password" v-model="form.newPassword" placeholder="请输入新密码"></u--input>
					</u-form-item>
					<u-form-item label="确认密码" prop="confirmPassword" borderBottom ref="item1" required>
						<u--input type="password" v-model="form.confirmPassword" placeholder="请确认密码"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>
	
	</view>

</template>

<script lang="ts">
	import { defineComponent, reactive, toRefs, ref } from "vue";
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { getUserInfo, updatePwd, logout } from '@/api/login/login.js';
	import base from "@/common/baseUrl.js";
	import updateUseModal from "@/uni_modules/uni-upgrade-center-app/utils/check-update.js";
	const base_url = base.baseUrl
	const mine = defineComponent({
		setup() {
			const data = reactive({
				titleStyle: {
					color: '#fff',
					fontSize: '34rpx',
					fontWeight: '600'
				},
				version:'',
				roleKey:'',
				info: {},
				show: false,
				form: {},
				adminList:[],
				rules: {
					oldPassword: [
						{ required: true, message: "旧密码不能为空", trigger: "blur" }
					],
					newPassword: [
						{ required: true, message: "新密码不能为空", trigger: "blur" },
						{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
					],
					confirmPassword: [
						{ required: true, message: "确认密码不能为空", trigger: "blur" },
						// { required: true, validator: equalToPassword, trigger: "blur" }
					]
				}
			})
			onLoad(() => {
				getUserInfo().then(res => {
					data.info = res.data
					if(data.info.roles&&data.info.roles.length){
						data.adminList=data.info.roles.filter((item)=>{return item.roleKey=="MobileAdmin"})
					}
				})
				
				//#ifdef APP-PLUS
				// 获取本地应用资源版本号
				plus.runtime.getProperty(plus.runtime.appid, (info) => {
					data.version = info.version;
				})
				//#endif
			})
			onShow(()=>{})
			const chooseAvatar = () => {
				uni.chooseImage({
					count: 1, //默认9
					success: function (res) {
						uni.uploadFile({
							url: base_url + '/system/user/profile/avatar', //接口
							filePath: res.tempFilePaths[0],
							name: 'avatarfile',
							header: {
								Authorization: uni.getStorageSync("access_token"),
							},
							file: res.tempFiles[0],
							success: async res => {
								getUserInfo().then(res1 => {
									data.info.avatar = res1.data.avatar
									uni.setStorageSync('userInfo', res1.data)
								})
							}
						})
					}
				});
			}
			const openModal = () => {
				data.show = true
				data.form = {}
			}
			const checkUpdate=()=>{
				updateUseModal(true)
			}
			const changeRoles=()=>{
				uni.navigateTo({
					url: `/pages/station/station`
				})
			}
			const uForm = ref()
			const submitForm = () => {
				if (data.form.oldPassword && data.form.newPassword && data.form.confirmPassword) {
					if (data.form.oldPassword.length < 6 || data.form.newPassword.length < 6 || data.form.confirmPassword.length < 6) {
						return uni.showToast({
							title: '密码长度不能小于6位',

						})
					}
					if (data.form.newPassword !== data.form.confirmPassword) {
						return uni.showToast({
							title: '两次输入不一致',

						})
					}
					updatePwd(data.form.oldPassword, data.form.newPassword).then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: '操作成功！',
							})
							data.show = false
						}
					})
				} else {
					return uni.showToast({
						title: '未填完',
					})
				}
			}
			const loginOut = () => {
				uni.showModal({
					title: '提示',
					content: `确定要退出登录吗？`,
					success: function (res) {
						if (res.confirm) {
							logout().then(res1 => {
								if (res1.code === 200) {
									uni.clearStorageSync()
									uni.reLaunch({
										url: '/pages/login/login'
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
			return {
				...toRefs(data),
				chooseAvatar,
				openModal,
				submitForm,
				loginOut,
				uForm,
				checkUpdate,
				changeRoles
			}
		}
	})
	export default mine
</script>
<style lang="scss" scoped>
	.my_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 50rpx;

		.my_top_l {
			display: flex;
			align-items: center;

			.my_name {
				margin-left: 24rpx;
				font-weight: bold;
				font-family: PingFang SC-Semibold, PingFang SC;
				color: #333333;
			}
		}
	}
</style>